<!--
 * @Author: 陈德基
 * @Date: 2023-12-13 00:11:40
 * @LastEditTime: 2024-01-17 22:55:21
 * @Description: 
 * @FilePath: /fullstack/front-end-learning/beginer/demo/demo03/overflow.html
 * 联系方式：
 * wx: melody_2009
 * qq: 7815171323 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">

  <style>
    div {
      /* 超出显示模式 */
      /* hidden , scroll, auto */
      /* overflow: scroll;  */
      background-color: gray;
      /*  box-sizing: border-box就是将border和padding数值包含在width和height之内，
      这样的好处就是修改border和padding数值盒子的大小不变。 */

      /*
      box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
        content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。
        border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。 
       */
      box-sizing: border-box;
    }

    .son {
      /* 子集添加margin-top 会影响父级的margin-top
       子组件要设置外边距，最好使用父级的padding */
      margin-top: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="son">子集div</div>
  </div>

</body>